<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script type="text/javascript" src="d3.v4.min.js"></script>
		<style type="text/css">
			body {
				font-family: Arial;
			}
		</style>
	</head>
	<body>
		<!-- <svg width="300" height="300">
			
			 <g transform="translate(60,60) rotate(30)">
				<rect x="20" y="20" width="60" height="60" fill="green"></rect>
				<circle cx="0" cy="0" r="30" fill="red"/>
			</g>
		</svg> -->
		<div id="svgcontainer"></div>
	</body>
	<script type="text/javascript">
		var width = 300,
			height = 300;
		var svg = d3.select("#svgcontainer")
			.append("svg")
			.attr("width", width)
			.attr("height", height)
		var group = svg.append("g")
			.attr("transform", "translate(60,60) rotate(30)")
		var rect = group.append("rect")
			.attr("x", 20)
			.attr("y", 20)
			.attr("width", 60)
			.attr("height", 30)
			.attr("fill", "green")
		var circle = group.append("circle")
			.attr("cx", 0)
			.attr("cy", 0)
			.attr("r", 30)
			.attr("fill", "red")
	</script>
</html>
